<template>
	<view class="refund-details-page">
		<!-- 状态进度条 -->
		<view class="status-progress">
			<view class="progress-header">
				<text class="progress-title">退款进度</text>
				<view :class="['status-badge', getStatusClass(refundDetail.requestStatus)]">
					{{ getStatusText(refundDetail.requestStatus) }}
				</view>
			</view>
			<view class="progress-container">
				<view class="progress-line">
					<view 
						class="progress-fill"
						:style="{ width: getProgressWidth() }"
					></view>
				</view>
				<view class="progress-points">
					<view 
						v-for="(point, index) in progressPoints" 
						:key="index"
						class="progress-point"
						:class="{ 
							'active': index <= getCurrentStep(),
							'completed': index < getCurrentStep()
						}"
					>
						<view class="point-icon">
							<text v-if="index < getCurrentStep()" class="check-icon">✓</text>
							<text v-else class="point-number">{{ index + 1 }}</text>
						</view>
						<view class="point-info">
							<text class="point-text">{{ point.text }}</text>
							<text v-if="point.time" class="point-time">{{ point.time }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 退款信息 -->
		<view class="refund-info">
			<view class="info-card">
				<view class="card-header">
					<text class="card-icon">📋</text>
					<text class="card-title">退款信息</text>
				</view>
				<view class="info-content">
					<!-- 主要信息 -->
					<view class="main-info">
						<view class="amount-section">
							<text class="amount-label">申请金额</text>
							<text class="amount-value">¥{{ refundDetail.requestAmount }}</text>
						</view>
						<view class="order-section">
							<text class="order-label">订单号</text>
							<text class="order-value">{{ refundDetail.orderId }}</text>
						</view>
					</view>
					
					<!-- 详细信息 -->
					<view class="detail-info">
						<view class="info-row">
							<text class="info-label">退款单号</text>
							<text class="info-value">{{ refundDetail.rrId }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">申请时间</text>
							<text class="info-value">{{ formatDate(refundDetail.requestTime) }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">退款原因</text>
							<text class="info-value">{{ refundDetail.reason }}</text>
						</view>
						<view v-if="refundDetail.description" class="info-row description-row">
							<text class="info-label">退款说明</text>
							<text class="info-value description-text">{{ refundDetail.description }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 处理记录 -->
		<view class="process-records">
			<view class="records-card">
				<view class="card-header">
					<text class="card-icon">📝</text>
					<text class="card-title">处理记录</text>
				</view>
				<view class="record-timeline">
					<view 
						v-for="(record, index) in processRecords" 
						:key="index"
						class="record-item"
					>
						<view class="timeline-dot"></view>
						<view class="timeline-line" v-if="index < processRecords.length - 1"></view>
						<view class="record-content">
							<view class="record-header">
								<text class="record-status">{{ record.status }}</text>
								<text class="record-time">{{ record.time }}</text>
							</view>
							<text v-if="record.remark" class="record-remark">{{ record.remark }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 凭证图片 -->
		<view v-if="refundDetail.images && refundDetail.images.length > 0" class="evidence-images">
			<view class="images-card">
				<view class="card-header">
					<text class="card-icon">📷</text>
					<text class="card-title">凭证图片</text>
				</view>
				<view class="image-grid">
					<view 
						v-for="(image, index) in refundDetail.images" 
						:key="index"
						class="image-item"
						@tap="previewImage(image, refundDetail.images)"
					>
						<image :src="image" mode="aspectFill" />
						<view class="image-overlay">
							<text class="preview-text">点击查看</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<button 
				v-if="refundDetail.requestStatus === 0"
				class="cancel-btn"
				@tap="cancelRefund"
			>
				<text class="btn-icon">✕</text>
				<text class="btn-text">取消申请</text>
			</button>
			<button 
				class="contact-btn"
				@tap="contactService"
			>
				<text class="btn-icon">💬</text>
				<text class="btn-text">联系商家</text>
			</button>
		</view>
		
		<!-- 测试按钮（仅用于演示） -->
		<!-- <view class="test-actions">
			<view class="test-header">
				<text class="test-icon">🧪</text>
				<text class="test-title">测试状态切换</text>
			</view>
			<view class="test-buttons">
				<button 
					class="test-btn"
					:class="{ active: refundDetail.requestStatus === 0 }"
					@tap="changeStatus(0)"
				>
					待处理
				</button>
				<button 
					class="test-btn"
					:class="{ active: refundDetail.requestStatus === 1 }"
					@tap="changeStatus(1)"
				>
					已同意
				</button>
				<button 
					class="test-btn"
					:class="{ active: refundDetail.requestStatus === 2 }"
					@tap="changeStatus(2)"
				>
					已拒绝
				</button>
			</view>
		</view> -->
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { refundApi } from '../../api'

// 退款详情数据
const refundDetail = ref({})

// 进度条节点
const progressPoints = ref([
	{ text: '已申请'},
	{ text: '待处理'},
	{ text: '已处理'}
])

// 处理记录
const processRecords = ref([
	{
		time: '2024-03-15 14:30:00',
		status: '退款申请已提交',
		remark: '等待商家处理'
	}
])

// 获取当前步骤
const getCurrentStep = () => {
	const status = refundDetail.value.requestStatus
	if (status === 0) return 1 // 待处理
	if (status === 1 || status === 2 || status === 3) return 2 // 已处理（包括已同意、已拒绝、已取消）
	return 0
}

// 获取进度条宽度
const getProgressWidth = () => {
	const step = getCurrentStep()
	return `${(step / 2) * 100}%`
}

// 格式化日期
const formatDate = (date) => {
	if (!date) return ''
	const d = new Date(date)
	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
}

// 预览图片
const previewImage = (current, urls) => {
	uni.previewImage({
		current,
		urls
	})
}

// 取消退款申请
const cancelRefund = () => {
	uni.showModal({
		title: '确认取消',
		content: '确定要取消退款申请吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showLoading({
					title: '处理中...'
				})
				
				// 模拟接口调用
				setTimeout(async () => {
					const cancelRes = await refundApi.cancelRefund(refundDetail.value.rrId)
					if (cancelRes.code === 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'success'
						})
						
					} else {
						uni.showToast({
							title: '取消失败',
							icon: 'error'
						})
					}
					// 返回上一页
					setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					
				}, 1000)
			}
		}
	})
}

// 联系商家
const contactService = () => {
	uni.navigateTo({
		url: '/src/pages/mine/service'
	})
}

// 测试状态切换
const changeStatus = (status) => {
	refundDetail.value.requestStatus = status
	updateProgressData()
}

// 获取退款详情
const getRefundDetail = async (id) => {
	try {
		// TODO: 调用获取退款详情接口
		const res = await refundApi.getRefundDetail(id)
		refundDetail.value = res.data
		const images = await refundApi.listRefundImages(id)
		refundDetail.value.images = images.data.map(item => `https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/${item.imagePath}`)
		console.log(refundDetail.value.images)
		// 根据状态更新进度条和处理记录
		updateProgressData()
	} catch (error) {
		console.error('获取退款详情失败：', error)
	}
}

// 更新进度数据
const updateProgressData = () => {
	const status = refundDetail.value.requestStatus
	
	// 重置进度条数据
	progressPoints.value = [
		{ text: '已申请'},
		{ text: '待处理'},
		{ text: '已处理'}
	]
	
	if (status === 0) {
		// 待处理状态 - 保持默认数据
		processRecords.value = [
			{
				time: refundDetail.value.requestTime,
				status: '退款申请已提交',
				remark: '等待商家处理'
			}
		]
	} else if (status === 1) {
		// 已同意
		progressPoints.value[2].text = '已同意'
		processRecords.value = [
			{
				time: refundDetail.value.requestTime,
				status: '退款申请已提交',
				remark: '等待商家处理'
			},
			{
				time: refundDetail.value.operateTime,
				status: '退款申请已同意',
				remark: '退款将在1-3个工作日内到账'
			}
		]
	} else if (status === 2) {
		// 已拒绝
		progressPoints.value[2].text = '已拒绝'
		processRecords.value = [
			{
				time: refundDetail.value.requestTime,
				status: '退款申请已提交',
				remark: '等待商家处理'
			},
			{
				time: refundDetail.value.operateTime,
				status: '退款申请已拒绝',
				remark: '拒绝原因：商品已使用，不符合退款条件'
			}
		]
	} else if (status === 3) {
		// 已取消
		progressPoints.value[2].text = '已取消'
		processRecords.value = [
			{
				time: refundDetail.value.requestTime,
				status: '退款申请已提交',
				remark: '等待商家处理'
			},
			{
				time: refundDetail.value.operateTime,
				status: '退款申请已取消',
				remark: '用户主动取消退款申请'
			}
		]
	}
}

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		0: '待处理',
		1: '已同意',
		2: '已拒绝',
		3: '已取消'
	}
	return statusMap[status] || '未知状态'
}

// 获取状态样式类
const getStatusClass = (status) => {
	const classMap = {
		0: 'pending',
		1: 'approved',
		2: 'rejected',
		3: 'cancelled'
	}
	return classMap[status] || ''
}

onMounted(() => {
	// 从路由参数获取退款ID
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const refundId = currentPage.options?.id
	
	if (refundId) {
		getRefundDetail(refundId)
	}
	
	// 初始化进度数据
	updateProgressData()
})
</script>

<style lang="scss" scoped>
.refund-details-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 24rpx;
}

// 状态进度条
.status-progress {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

	.progress-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;

		.progress-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

		.status-badge {
			padding: 8rpx 20rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-weight: 500;

			&.pending {
				background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
				color: #d63031;
			}

			&.approved {
				background: linear-gradient(135deg, #a8e6cf 0%, #88d8c0 100%);
				color: #00b894;
			}

			&.rejected {
				background: linear-gradient(135deg, #ff7675 0%, #fd79a8 100%);
				color: #fff;
			}

			&.cancelled {
				background: linear-gradient(135deg, #b2bec3 0%, #74b9ff 100%);
				color: #fff;
			}
		}
	}

	.progress-container {
		position: relative;

		.progress-line {
			position: absolute;
			top: 40rpx;
			left: 60rpx;
			right: 60rpx;
			height: 4rpx;
			background: #e8e8e8;
			border-radius: 2rpx;

			.progress-fill {
				height: 100%;
				background: linear-gradient(135deg, #1b3c4b 0%, #2e5c6a 100%);
				border-radius: 2rpx;
				transition: width 0.3s ease;
			}
		}

		.progress-points {
			display: flex;
			justify-content: space-between;
			position: relative;
			z-index: 1;

			.progress-point {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;

				.point-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #f8f9fa;
					border: 4rpx solid #e8e8e8;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 16rpx;
					transition: all 0.3s ease;

					.check-icon {
						color: #fff;
						font-size: 36rpx;
						font-weight: bold;
					}

					.point-number {
						color: #999;
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.point-info {
					text-align: center;

					.point-text {
						font-size: 26rpx;
						color: #999;
						margin-bottom: 8rpx;
						transition: color 0.3s ease;
						font-weight: 500;
					}

					.point-time {
						font-size: 22rpx;
						color: #ccc;
					}
				}

				&.active {
					.point-icon {
						background: linear-gradient(135deg, #1b3c4b 0%, #2e5c6a 100%);
						border-color: #1b3c4b;
						
						.point-number {
							color: #fff;
						}
					}

					.point-info .point-text {
						color: #1b3c4b;
						font-weight: 600;
					}
				}

				&.completed {
					.point-icon {
						background: linear-gradient(135deg, #a8e6cf 0%, #88d8c0 100%);
						border-color: #00b894;
					}
					
					.point-info .point-text {
						color: #00b894;
						font-weight: 600;
					}
				}
			}
		}
	}
}

// 信息卡片通用样式
.info-card,
.records-card,
.images-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #f0f0f0;

		.card-icon {
			font-size: 32rpx;
			margin-right: 16rpx;
		}

		.card-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}
}

// 退款信息
.refund-info {
	.info-content {
		.main-info {
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			margin-bottom: 24rpx;
			gap: 20rpx;

			.amount-section {
				flex: 1;
				background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
				padding: 32rpx 24rpx;
				border-radius: 16rpx;
				border: 2rpx solid #ffebee;
				text-align: center;

				.amount-label {
					font-size: 26rpx;
					color: #ff6b6b;
					margin-bottom: 12rpx;
					display: block;
					font-weight: 500;
				}

				.amount-value {
					font-size: 48rpx;
					color: #ff6b6b;
					font-weight: 700;
					display: block;
				}
			}

			.order-section {
				flex: 1;
				background: #f8f9fa;
				padding: 32rpx 24rpx;
				border-radius: 16rpx;
				border: 2rpx solid #e9ecef;
				text-align: center;

				.order-label {
					font-size: 26rpx;
					color: #6c757d;
					margin-bottom: 12rpx;
					display: block;
					font-weight: 500;
				}

				.order-value {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
					display: block;
				}
			}
		}

		.detail-info {
			background: #fff;
			border-radius: 16rpx;
			border: 2rpx solid #f0f0f0;
			overflow: hidden;

			.info-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 32rpx;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				&.description-row {
					flex-direction: column;
					align-items: flex-start;
					gap: 12rpx;

					.info-label {
						font-size: 26rpx;
						color: #6c757d;
						font-weight: 500;
					}

					.info-value.description-text {
						font-size: 28rpx;
						color: #333;
						line-height: 1.6;
						background: #f8f9fa;
						padding: 16rpx;
						border-radius: 8rpx;
						width: 100%;
						box-sizing: border-box;
					}
				}

				.info-label {
					font-size: 26rpx;
					color: #6c757d;
					font-weight: 500;
					min-width: 120rpx;
				}

				.info-value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					text-align: right;
					flex: 1;
				}
			}
		}
	}
}

// 处理记录
.process-records {
	.record-timeline {
		position: relative;

		.record-item {
			position: relative;
			padding-left: 40rpx;
			margin-bottom: 32rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.timeline-dot {
				position: absolute;
				left: 0;
				top: 8rpx;
				width: 16rpx;
				height: 16rpx;
				background: #1b3c4b;
				border-radius: 50%;
				border: 4rpx solid #fff;
				box-shadow: 0 0 0 2rpx #e8e8e8;
			}

			.timeline-line {
				position: absolute;
				left: 7rpx;
				top: 24rpx;
				width: 2rpx;
				height: calc(100% + 8rpx);
				background: #e8e8e8;
			}

			.record-content {
				background: #f8f9fa;
				padding: 24rpx;
				border-radius: 12rpx;
				border-left: 4rpx solid #1b3c4b;

				.record-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12rpx;

					.record-status {
						font-size: 28rpx;
						color: #333;
						font-weight: 600;
					}

					.record-time {
						font-size: 24rpx;
						color: #999;
					}
				}

				.record-remark {
					font-size: 26rpx;
					color: #666;
					line-height: 1.5;
				}
			}
		}
	}
}

// 凭证图片
.evidence-images {
	.image-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;

		.image-item {
			position: relative;
			width: 100%;
			height: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);

			image {
				width: 100%;
				height: 100%;
			}

			.image-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.3);
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0;
				transition: opacity 0.3s ease;

				.preview-text {
					color: #fff;
					font-size: 24rpx;
					font-weight: 500;
				}
			}

			&:active .image-overlay {
				opacity: 1;
			}
		}
	}
}

// 底部操作按钮
.bottom-actions {
	display: flex;
	gap: 24rpx;
	margin-top: 40rpx;

	.cancel-btn,
	.contact-btn {
		flex: 1;
		height: 96rpx;
		font-size: 32rpx;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		transition: all 0.3s ease;
	}

	.cancel-btn {
		background: #f8f9fa;
		color: #666;
		border: 2rpx solid #e9ecef;

		&:active {
			background: #e9ecef;
			transform: translateY(2rpx);
		}
	}

	.contact-btn {
		background: linear-gradient(135deg, #1b3c4b 0%, #2e5c6a 100%);
		color: #fff;
		box-shadow: 0 8rpx 25rpx rgba(27, 60, 75, 0.3);

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 15rpx rgba(27, 60, 75, 0.3);
		}
	}

	.btn-icon {
		font-size: 28rpx;
	}

	.btn-text {
		font-weight: 600;
	}
}

// 测试按钮区域
.test-actions {
	margin-top: 24rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

	.test-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.test-icon {
			font-size: 32rpx;
			margin-right: 16rpx;
		}

		.test-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.test-buttons {
		display: flex;
		gap: 20rpx;

		.test-btn {
			flex: 1;
			height: 80rpx;
			font-size: 28rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f8f9fa;
			color: #666;
			border: 2rpx solid #e9ecef;
			transition: all 0.3s ease;

			&.active {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: #fff;
				border-color: #667eea;
				box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.3);
			}

			&:active {
				transform: translateY(2rpx);
			}
		}
	}
}
</style>
